import React,{Component} from "react";
import {Router,Route,Switch, Outlet, useNavigate} from "react-router-dom";
import "./App.css"

import { Flex, Layout } from 'antd';


import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
import { Menu } from 'antd';

const items = [
    {
      key: 'sub1',
      label: '模块一',
      icon: <MailOutlined />,
      children: [
        {
          key: 'g1',
       
          type: 'group',
          children: [
            { key: '/app/A1', label: '11111' },
            { key: '/app/A2', label: '22222' },
          ],
        }
      
      ],
    },
    {
      key: 'sub2',
      label: 'Navigation Two',
      icon: <AppstoreOutlined />,
      children: [
        { key: '5', label: 'Option 5' },
        { key: '6', label: 'Option 6' },
        {
          key: 'sub3',
          label: 'Submenu',
          children: [
            { key: '7', label: 'Option 7' },
            { key: '8', label: 'Option 8' },
          ],
        },
      ],
    },
    {
      type: 'divider',
    }
   
  ];




const { Header, Footer, Sider, Content } = Layout;
const headerStyle = {
  textAlign: 'center',
  color: '#fff',
  height: 64,
  paddingInline: 48,
  lineHeight: '64px',
  backgroundColor: '#4096ff',
};
const contentStyle = {
 
  Height: 400,
  lineHeight: '120px',
  color: '#fff',
  backgroundColor: '#0958d9',
};
const siderStyle = {
  textAlign: 'center',
  lineHeight: '120px',
  height:"300px",
  color: '#fff',
  backgroundColor: '#1677ff',
};
const footerStyle = {
  textAlign: 'center',
  color: '#fff',
  backgroundColor: '#4096ff',
};
const layoutStyle = {
  borderRadius: 8,
  overflow: 'hidden',
  width: '100%',
};



export default function App(){
    const navigator = useNavigate()
 
    const gotopages=(a)=>{
     navigator(a.key)
        
    }
    
    return(
        <div>App


<Layout style={layoutStyle}>
      <Sider width="300" style={siderStyle}>
      
      <Menu
      onClick={gotopages}
      style={{ width: 300 }}
      defaultSelectedKeys={['1']}
      defaultOpenKeys={['sub1']}
      mode="inline"
      items={items}
    />


      </Sider>
      <Layout>
  
        <Content style={contentStyle}>
            <Outlet></Outlet>
        </Content>
    
      </Layout>
    </Layout>
        </div>
    )
}